<template>
	<div style='padding-left: 20px;'>
		<div style='display: flex;align-items: center;margin-left: 20px;margin-top: 10px;padding-bottom:5px;margin-right:20px;position: relative;' @click='toggle(item)'>
			<div class='next' v-if='isHave' style='right: 2em;'></div>
			<div v-if='isHave' style='position: absolute;right: 0;color: #CCCCCC;font-weight: bold;'>下级</div>
			<span class='checkbox' :class='{checked:item.checked,isExits:item.isExits}' @click.stop='setCheck(item)'></span>
			<img v-if='!isHave&&(item.SEX || item.GENDER == 1)' src='static/image/home/person_1.png' style='width: 22px;height: 22px;margin-left: 5px;'>
			<img v-if='!isHave&&(item.SEX || item.GENDER == 2)' src='static/image/home/person_2.png' style='width: 22px;height: 22px;margin-left: 5px;'>
			<span :class='{marginLeft:!isOrg || !isHave}'>{{item.LEABLE}}</span>
		</div>
		<ul v-show='item.open' v-if='isHave&&item.child'>
			<my-tree v-for='(cell,index) in item.child' :item='cell' :key="(item.FID || item.NO)+index"></my-tree>
		</ul>
	</div>
</template>

<script>
import {getGroup} from '@/api/broadTree'
	export default {
		name: 'myTree',
		props: ['item'],
		data() {
			return {
				isHave: false,
				open: false,
				isOrg: false,
				personsExitsArr: [],
				personsCheckArr: []
			}
		},
		watch: {
			item() {
				//				console.log(this.$store.state.tree.list)
			}
		},
		methods: {
			setChildChecked(arr, isTrue) {
				for(let i in arr) {
					this.$set(arr[i], 'checked', isTrue)
					if(arr[i].child) {
						this.setChildChecked(arr[i].child, isTrue)
					}
				}
			},
			setParent(arr, constArr, res) {
				console.log(arr)
				console.log(constArr)
				console.log(res)
				for(let i in arr) {
					if(arr[i].FID == res || arr[i].NO == res) {
						constArr.push(i)
						let str = constArr.join('')
						str = str.substring(0, str.length - 1)
						this.$store.state.tree.result = str.split('')
					} else if(arr[i].child) {
						constArr.push(i)
						this.setParent(arr[i].child, constArr, res)
						if(arr != this.$store.state.tree.list) {
							console.log(constArr)
							console.log('-------------------------')
							constArr = [constArr[0]]
						} else {
							constArr = []
						}
					} else {

					}
				}
			},
			setParentChecked() {
				let t = this.$store.state.tree.list
				let indexArr = this.$store.state.tree.result
				console.log(indexArr + '--------------------------------------------------tree result')
				let s = true
				if(indexArr.length == 0) {
					for(let i in t) {
						s = s && !!t[i].checked
					}
					this.$store.state.tree.allCheck = s
				} else {
					let w = null
					for(let i = 0; i < indexArr.length; i++) {
						if(i == indexArr.length - 1) w = t[indexArr[i]];
						t = t[indexArr[i]].child
					}
					for(let i = 0; i < t.length; i++) {
						s = s && !!t[i].checked
					}
					this.$set(w, 'checked', s)
					this.$store.state.tree.result = indexArr.slice(0, indexArr.length - 1)
					this.setParentChecked()
				}
			},
			setCheck(item) {
				console.log(item + '------------------>checked')
				if(!item.isExits) {
					let id = item.FID || item.NO
					let _this = this
					this.$set(item, 'checked', !item.checked)
					let isT = item.checked
					this.$forceUpdate()
					let constArr = []
					if(this.isHave) this.setChildChecked(item.child, isT)
					this.setParent(this.$store.state.tree.list, constArr, id)
					this.setParentChecked()
				}
				this.$forceUpdate()
			},
			getMath() {
				return(Math.random() * 10).toFixed()
			},
			toggle(item) {
				if(item.NO && this.isOrg) {
					//					setList()
					this.$router.push({
						path: '/personalData/' + item.NO
					})
					return;
				} else if(item.FID) {
					this.$set(item, 'open', !item.open)
					let isTrue = item.checked
					if(!item.child) {
						getGroup({
							fid: item.FID
						}).then(msg=>{
							msg = msg.data
							console.log(msg)
							for(let i in msg) {
								msg[i].checked = isTrue
							}
							this.$set(item, 'child', msg)
							this.$forceUpdate()
						}).catch(error=>{
							console.log('错误',error)
						})
					}
					//					let obj = JSON.parse('[{"PID":null,"LEABLE":"高层领导","FID":"D0001"},{"PID":null,"LEABLE":"佛挡杀佛","NO":"D0002"},{"PID":null,"LEABLE":"信息技术部","FID":"D0003"},{"PID":null,"LEABLE":"市场部","FID":"D0004"},{"PID":null,"LEABLE":"财务中心","FID":"D0005"},{"PID":null,"LEABLE":"督察部","FID":"D0006"},{"PID":null,"LEABLE":"企划部","FID":"D0007"},{"PID":null,"LEABLE":"办公室","FID":"D0008"},{"PID":null,"LEABLE":"行政部","FID":"D0009"},{"PID":null,"LEABLE":"人力资源部","FID":"D0010"},{"PID":null,"LEABLE":"采购部","FID":"D0011"},{"PID":null,"LEABLE":"车管部","FID":"D0012"},{"PID":null,"LEABLE":"客服部","FID":"D0013"},{"PID":null,"LEABLE":"运营部","FID":"D0014"},{"PID":null,"LEABLE":"仓储部","FID":"D0015"},{"PID":null,"LEABLE":"配送中心","FID":"D0016"},{"PID":null,"LEABLE":"工程部","FID":"D0017"},{"PID":null,"LEABLE":"工会","FID":"D0018"}]')
					//					for(let i in obj) {
					//						if(i != 5 && i != 8) {
					//							obj[i].FID = false
					//							obj[i].NO = this.getMath() + '-' + this.getMath() + '-' + this.getMath() + '-' + this.getMath() + new Date().getTime()
					//						}
					//						obj[i].checked = isTrue
					//						obj[i].isExits = true
					//					}
					//					this.$set(item, 'child', obj)
				}
			},
			canvas(index) {
				if(this.isHave) {
					let canvas = this.$refs[index]
					let ctx = canvas.getContext('2d')
					ctx.clearRect(0, 0, 20, 20)
					ctx.fillStyle = '#000000'
					ctx.beginPath()
					if(this.open) {
						ctx.moveTo(0, 4)
						ctx.lineTo(12, 4)
						ctx.lineTo(6, 12)
						ctx.fill()
					} else {
						ctx.moveTo(0, 4)
						ctx.lineTo(10, 10)
						ctx.lineTo(0, 16)
						ctx.fill()
					}
					ctx.closePath()
				}
			}
		},
		mounted() {
			//			this.canvas(this.item.FID)
		},
		created() {
			this.isHave = this.item.FID ? true : false
			this.isOrg = this.$route.params.id == 'person'
			if(this.$route.params.id == "groupAdd") this.personsExitsArr = this.$store.state.groupChat.userInfo
			if(this.$route.params.id == "second") this.personsCheckArr = this.$store.state.groupChat.initPersons
		}
	}
</script>